import '@umijs/max';
import {Button, Form, message, Spin} from 'antd';
import React from 'react';
import style from "@/pages/InterfaceInfo/index.less";
import ThrottledButton from "@/components/ThrottledButton";
import {CheckCircleFilled, CloseCircleFilled} from "@ant-design/icons";

export type Props = {
  // 测试遮罩
  fastTestSpining: boolean;
  // 是否在测试中
  fastTest: boolean;
  fastTestCode: string;
  fastTestSuccess: string;
  // 提交测试
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  // 是否显示
  visible: boolean;
};

const FastTest: React.FC<Props> = (props) => {


  const {fastTestSpining, fastTest, fastTestCode, fastTestSuccess, onSubmit,} = props;

  return (
    <div className={"spin-container"}>
      <Spin
        wrapperClassName={"spin-container"}
            tip={"检测接口中...（检测服务是否可用）"}
            spinning={fastTestSpining} >
        <div style={{marginBottom: 24}}>注：<font style={{color: "red"}}>单纯检测</font>
          接口是否
          <font style={{color: "red"}}>可调通</font>
          ，返回的数据请
          <font style={{color: "red"}}>自行检查</font>
        </div>
        <ThrottledButton mBottom={24} submit={onSubmit} title={"再次测试"}/>
        {
          fastTest && (
            fastTestCode === 0 ?
              <div style={fastTestSuccess}>
                <CheckCircleFilled style={{fontSize: 26, color: "#5cb85c", marginRight: 7}}/>
                <p style={{margin: 0}}>接口正常，可调用，状态码: {fastTestCode} (成功)</p>
              </div>
              :
              <div style={{...fastTestSuccess, borderLeftColor: "#ff0b1e"}}>
                <CloseCircleFilled style={{fontSize: 26, color: "#ff0b1e", marginRight: 7}}/>
                <p style={{margin: 0}}>接口异常，请在次调用，状态码: {fastTestCode} (失败)</p>
              </div>
          )
        }
      </Spin>
    </div>
  );
};
export default FastTest;
